<template>
  <div>
    <Card>
      <p slot="title">
        <Icon type="ios-school" size="24"></Icon>校区管理页面
      </p>
      <Button slot="extra" type="success" @click="showCreatePage">添加校区</Button>
      <div>
        <Table border :columns="columns" :data="data">
          <template slot-scope="{ row, index }" slot="action">
            <Button type="primary" size="small" style="margin-right: 5px" @click="edit(row)">修改</Button>
            <Button type="error" size="small" @click="remove(row.id)">删除</Button>
          </template>
        </Table>
      </div>
    </Card>
    <create-page :isShow="isShow" @close="close" @ok="ok"></create-page>
    <edit-page :isShow="editisShow" @editclose="editclose" :school="editSchool" @editok="editok"></edit-page>
  </div>
</template>
<script>
import { getAllSchool, remove } from "../../api/school";
import CreatePage from "@/view/axschool/components/create_page.vue";
import EditPage from "@/view/axschool/components/edit_page.vue";
export default {
  data() {
    return {
      isShow: false,
      editisShow: false,
      columns: [
        {
          title: "编号",
          key: "id"
        },
        { title: "校区名", key: "schoolName" },
        {
          title: "负责人",
          key: "contact"
        },
        {
          title: "地址",
          key: "loc"
        },
        { title: "联系电话", key: "phone" },
        {
          title: "操作",
          slot: "action",
          width: 150,
          align: "center"
        }
      ],
      data: [],
      editSchool: {}
    };
  },
  components: {
    CreatePage,
    EditPage
  },
  methods: {
    remove(id) {
      this.$Modal.confirm({
        title: "请确认",
        content: "确认要删除选中记录吗？",
        onOk: () => {
          remove(id).then(async result => {
            if (result.data.success) {
              let data = await getAllSchool();
              this.data = data;
            }
          });
        }
      });
    },
    edit(school) {
      this.editSchool = school;
      this.editisShow = true;
    },
    showCreatePage() {
      this.isShow = true;
    },
    close() {
      this.isShow = false;
    },
    async ok() {
      let data = await getAllSchool();
      this.data = data;
      this.isShow = false;
    },
    editclose() {
      this.editisShow = false;
    },
    async editok() {
      let data = await getAllSchool();
      this.data = data;
      this.editisShow = false;
    }
  },
  async created() {
    let data = await getAllSchool();
    this.data = data;
  }
};
</script>
<style scoped>
</style>
